import * as echarts from 'echarts/core'
//  基础折线图
export const colorOptions = {
  title: {},
  tooltip: {},
  grid: {
    left: '5%',
    right: '5%',
    bottom: '3%',
    top: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
}

//  数据集柱形图
export const datasetOptions = {
  title: {},
  tooltip: {},
  grid: {
    left: '5%',
    right: '5%',
    bottom: '3%',
    top: '3%',
    containLabel: true
  },
  dataset: {
    source: [
      ['product', '2015', '2016', '2017'],
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5],
      ['Walnut Brownie', 72.4, 53.9, 39.1]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
}

//  堆叠柱状图
export const doubleXBarOptions = {
  title: {},
  tooltip: {},
  grid: {
    left: '5%',
    right: '5%',
    bottom: '3%',
    top: '6%',
    containLabel: true
  },
  backgroundColor: '#031a40',
  legend: {
    show: true,
    left: 'center',
    top: 10,
    itemGap: 30,
    itemWidth: 14,
    itemHeight: 11,
    textStyle: {
      fontSize: 12,
      color: '#ffffff'
    }
  },
  // x轴的数据
  xAxis: [
    {
      data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: 'rgba(255, 255, 255, .5)'
        }
      },
      axisLabel: {
        interval: 0,
        fontSize: 12,
        color: '#FFFFFF'
      },
      axisTick: {
        show: true, // 显示坐标轴刻度线
        length: 5 // 刻度线的长度
      }
    }
  ],
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        width: 1,
        color: 'rgba(255, 255, 255, .5)'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255, 255, 255, .35)',
        type: 'dotted'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      fontSize: 14,
      color: '#FFFFFF'
    }
  },
  // 可用于指定统计图类型
  series: [
    {
      name: '销量',
      type: 'bar',
      barWidth: 25,
      stack: 'user',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#008DFF'
            },
            {
              offset: 1,
              color: '#07ECFF'
            }
          ])
        }
      },
      data: [5, 20, 36, 10, 30, 190, 12, 23, 34, 45, 56, 67]
    },
    {
      name: '销量1',
      type: 'bar',
      barWidth: 25,
      stack: 'user',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#05D54D'
            },
            {
              offset: 1,
              color: '#02F79C'
            }
          ])
        }
      },
      data: [5, 20, 36, 10, 30, 190, 12, 23, 34, 45, 56, 67]
    }
  ]
}

//  3D圆柱
export const threeDBarOption = {
  backgroundColor: '#031a40',
  color: ['#63caff', '#49beff', 'rgb(2,47,87)', 'rgb(2,47,87)'],
  grid: {
    top: '15%',
    left: '3%',
    right: '3%',
    bottom: '5%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    },
    textStyle: {
      fontSize: 18
    },
    backgroundColor: 'rgba(255,255,255,1)',
    extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);',
    formatter: (params: any) => {
      return `${params[0].name} : <br> ${params[0].value} 天 <br> ${params[3].value} % `
    }
  },
  xAxis: {
    type: 'category',
    data: ['业务受理', '方案答复'],
    splitLine: {
      show: false
    },
    axisLabel: {
      color: '#A1BADF',
      fontSize: 20,
      interval: 'auto' // x轴间距
      // rotate:40
    },
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(152, 212, 255, .1)'
      }
    }
  },
  yAxis: [
    {
      type: 'value',
      // name: '天',
      nameGap: '30',
      min: 0,
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        fontSize: 24,
        color: '#A1BADF'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(152, 212, 255, .1)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(152, 212, 255, .1)'
        }
      },
      nameTextStyle: {
        color: '#A1BADF',
        fontWeight: 400,
        fontSize: 24
      }
    },
    {
      type: 'value',
      // name: '%',
      nameGap: '30',
      nameTextStyle: {
        color: '#A1BADF',
        fontWeight: 400,
        fontSize: 24
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        fontSize: 24,
        color: '#A1BADF'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(152, 212, 255, .1)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(152, 212, 255, .1)'
        }
      }
    }
  ],
  series: [
    {
      data: [200, 85],
      type: 'bar', // 柱图
      barMaxWidth: 'auto',
      barWidth: 40,
      itemStyle: {
        color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          type: 'linear',
          global: false,
          colorStops: [
            {
              offset: 0,
              color: '#2A76FF'
            },
            {
              offset: 0.5,
              color: '#00A8FF'
            },
            {
              offset: 1,
              color: '#00D8FF'
            }
          ]
        }
      }
    },
    {
      data: [1, 1],
      type: 'pictorialBar', // 底部
      barMaxWidth: '20',
      symbolOffset: [0, '50%'],
      symbolSize: [40, 15]
    },
    {
      data: [200, 85],
      type: 'pictorialBar', // 顶部
      barMaxWidth: '20',
      symbolPosition: 'end',
      symbolOffset: [0, '-50%'],
      symbolSize: [40, 12],
      zlevel: 2
    },
    // 折线
    {
      name: '',
      type: 'line',
      showAllSymbol: true,
      lineStyle: {
        color: '#00D8FF'
      },
      showSymbol: true,
      symbol: 'circle',
      symbolSize: 20,
      itemStyle: {
        normal: {
          color: '#121E43',
          borderColor: '#00D8FF',
          borderWidth: 3
        }
      },
      data: ['10', '50'],
      yAxisIndex: 1
    }
  ]
}

// 横向柱形图
export const crosswiseBarOption = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744]
    },
    {
      name: '2012',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141]
    }
  ]
}

// 折柱混合
export const MixedBarOption = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    data: ['Evaporation', 'Precipitation', 'Temperature']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      // name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      // name: 'Temperature',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value: any) {
          return (value as number) + ' ml'
        }
      },
      data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
    },
    {
      name: 'Precipitation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value: any) {
          return (value as number) + ' ml'
        }
      },
      data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
    },
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value: any) {
          return (value as number) + ' °C'
        }
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
}
